<template>
  <el-row>






    <el-col :span="6">
      <el-button type="danger" :icon="Search" @click="gettableData()">查询</el-button>
    </el-col>
  </el-row>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="ablactationId" label="编号" />
    <el-table-column prop="ablactationEar" label="耳号" />
    <el-table-column prop="ablactationDay" label=" 品种" />
    <el-table-column prop="ablactationRoom" label="当前栋舍" />
    <el-table-column prop="ablactationSeat" label="当前栏位" />
    <el-table-column prop="ablactationEnd" label="离场状态" />
    <el-table-column prop="ablactationEseat" label="淘汰原因" />
    <el-table-column prop="ablactationNum" label="处理措施" />

  </el-table>
  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
          :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
          layout="total, slot, prev, pager, next" :total="form.totalCount" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
          ,每页显示{{ form.pageSize }}条,当前第{{ form.pageIndex }}/{{ form.pageCount }}页
          <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex == 1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
          :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页" layout=" slot, sizes, jumper"
          :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <el-button class="btn-prev" @click="handleCurrentChange(form.pageCount)"
            :disabled="form.pageIndex == form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const route = useRoute()
const router = useRouter()
const form = reactive({

  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
})



//获取部门信息
const tableData = ref([])
const gettableData = () => {
  axios.post(apiUrl+'/api/Eliminates/showEliminates', {
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,

  }).then(res => {
    console.log(res.data)
    tableData.value = res.data.data.list
    form.pageCount = res.data.data.pageCount;
    form.totalCount = res.data.data.totalCount;
  })
}

//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val
  gettableData()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val
  gettableData()
}

//创建生命周期函数钩
onMounted(() => {

  gettableData()
})


</script>
